<template>
  <div class="w-1200-container">
    <div class="flex flex-direction search_box">
      <div class="flex align-center justify-between search">
        <div class="title">在线展厅</div>
        <div class="self-end flex align-center search-input">
          <input
            ref="keyword"
            placeholder="请输入关键字"
            value=""
            @keypress.enter="search"
          />
          <div class="search-btn">
            <i class="el-icon-search" @click.stop="search"></i>
          </div>
        </div>
      </div>

      <div
        v-for="(item, index) in scienceTypeList"
        :key="'scienceTypeList' + index"
        class="flex self-start flex-wrap"
      >
        <div class="search-label">{{ item.name }}:</div>

        <div class="flex-sub flex align-center flex-wrap">
          <el-radio-group
            v-for="(ite, ind) in item.children"
            :key="'scienceType' + ind"
            v-model="radioCheckList[index]"
            class="scienceType-select"
            @change="radioChange"
          >
            <el-radio-button :label="ite.id">{{ ite.name }}</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>

    <div class="flex flex-direction context">
      <div class="flex align-center flex-wrap justify-between m-box">
        <div
          v-for="(item, index) in mdata.list"
          :key="index"
          class="flex flex-direction justify-between m-card"
          @click="jumpTo('TechnologyResultsExhibition', item)"
        >
          <div class="image">
            <el-image
              :src="item.picture"
              fit="cover"
              style="width: 100%;height: 100%;"
            >
              <div slot="error" style="width: 100%; height: 100%;">
                <el-image
                  :src="require('@/assets/img/pic_error2.png')"
                  style="width: 100%; height: 100%;"
                ></el-image>
              </div>
            </el-image>
          </div>
          <div class="flex-sub flex flex-direction justify-between detail">
            <div class="title">{{ item.title }}</div>
            <div class="flex align-center justify-between desc">
              <span>所属领域</span>
              <span style="color: #2A65FF;">{{ item.fieldName }}</span>
            </div>
            <div class="flex align-center justify-between desc">
              <span>成果阶段</span>
              <span style="color: #ff9306;">{{ item.phaseName }}</span>
            </div>
            <div class="flex align-center justify-between desc">
              <span>所在地</span>
              <span style="color: #333;">{{ item.address }}</span>
            </div>
          </div>
        </div>

        <!-- 用于占位防止flex布局出现布局不均问题 -->
        <div style="width: 24%; height: auto;"></div>
        <div style="width: 24%; height: auto;"></div>
        <div style="width: 24%; height: auto;"></div>
        <!-- END -->
      </div>

      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next, ->"
        :page-size="mdata.limit"
        :page-count="mdata.total"
        prev-text="上一页"
        next-text="下一页"
        :hide-on-single-page="true"
        :current-page="mdata.page"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// import BreadCrumb from '@/components/BreadCrumb.vue';
import {
  requestScienceResultExhibitionTypeList,
  requestScienceResultExhibitionList,
} from '@/api/techShowList.js'

export default {
  name: 'TechnologyResultsExhibition',
  components: {},
  // 路由守卫控制页面缓存
  // beforeRouteLeave(to, from, next) {
  //   if (to.name === 'TechnologyDetail') {
  //     this.$store.commit('SET_KEEP_ALIVE', ['TechnologyResultsExhibition'])
  //   } else {
  //     this.$store.commit('SET_KEEP_ALIVE', [])
  //   }
  //   next()
  // },
  data() {
    return {
      // 搜索分类
      scienceTypeList: [],
      // 选项分类
      radioCheckList: [],

      // 分页数据存储
      mdata: {
        total: 1,
        page: 1,
        limit: 20,
        title: null,
        fieldId: null,
        typeId: null,
        phaseId: null,
        list: [],
      },
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 请求方法
    init() {
      this.requestTypeList()
      this.requestList()
    },
    // 获取搜索条件列表
    requestTypeList() {
      requestScienceResultExhibitionTypeList().then((res) => {
        this.scienceTypeList = res.data
        this.scienceTypeList.forEach((value, key) => {
          value.children.forEach((v, k) => {
            if (k === 0) {
              this.radioCheckList[key] = v.id
            }
          })
        })
      })
    },
    // 获取列表
    requestList() {
      // 排除掉某个对象
      const { list, ...obj } = this.mdata
      requestScienceResultExhibitionList(obj).then((res) => {
        if (res.code === 200) {
          this.mdata.total = res.data.total
          this.mdata.list = res.data.data
        }
      })
    },

    // 搜索
    searchInput() {
      if (this.$refs.keyword.value.length === 0) {
        this.mdata.title = ''
        this.requestList()
      }
    },

    search() {
      this.mdata.title = this.$refs.keyword.value
      this.requestList()
    },

    // 搜索条件发生改变
    radioChange() {
      this.radioCheckList.forEach((value, key) => {
        switch (key) {
          case 0:
            this.mdata.fieldId = value
            break
          case 1:
            this.mdata.typeId = value
            break
          case 2:
            this.mdata.phaseId = value
            break
          default:
            break
        }
      })
      this.requestList()
    },

    // 分页发生改变
    pageChange(nowpage) {
      this.mdata.page = nowpage
      this.requestList()
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },

    // 跳转
    jumpTo(type, item) {
      this.$router.push({
        name: 'techShowDetail',
        params: { id: item.id, type: type },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
/* 搜索 */
.search_box {
  margin-top: 1.5rem;
  width: 100%;
  height: auto;
  background-color: #fff;

  & > div {
    margin-top: 0.75rem;
    padding-bottom: 0.75rem;
    width: 100%;
    border-bottom: 1px solid #ebebeb;
  }

  .search {
    .title {
      font-size: 26px;
      font-weight: bold;
      color: #333;
      letter-spacing: 1px;
    }

    /* 输入搜索栏 */
    .search-input {
      display: inline-block;
      position: relative;
      margin-top: -0.5rem;

      input {
        padding: 0 2.375rem 0 1rem;
        width: 22.75rem;
        height: 2.5rem;
        background-color: #f5f5f5;
        border: 0;
        border-radius: 2px;
      }

      .search-btn {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-45%);
        width: 1.75rem;
        height: 1.75rem;
        text-align: center;
        cursor: pointer;

        &:hover i {
          transform: scale(1.2);
        }

        i {
          transform: scale(1.1);
          transition: all 0.1s;
        }
      }
    }
  }

  /* 搜索条件栏 */
  .search-label {
    margin-top: 0.65rem;
    width: 3.75rem;
    font-size: 0.875rem;
    color: #999;
  }

  .scienceType-select {
    margin-left: 1.25rem;

    ::v-deep .el-radio-button__inner {
      color: #333;
      border: 0;
      background-color: #fff;
    }

    ::v-deep .el-radio-button__inner:hover,
    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      color: #2a65ff;
    }
  }
}
/* END */

.context {
  margin-top: 2.4rem;
  margin-bottom: 6rem;

  .m-box {
    .m-card {
      margin-top: 1rem;
      width: 24%;
      height: 23.5rem;
      background-color: #fff;
      border: 1px solid #ececec;
      cursor: pointer;

      &:hover {
        box-shadow: 0 0 1.25rem 0 rgba(182, 189, 206, 0.59);
      }

      .image {
        width: 100%;
        height: 11.875rem;
      }

      .detail {
        padding: 1.5rem;

        .title {
          width: 100%;
          height: 3.5rem;
          font-size: 15px;
          font-weight: bold;
          color: #333;

          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .desc {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}

/* 分页处理 */
::v-deep .el-pagination {
  display: inline-block;
  padding: 3rem 0 5rem;
  width: 100%;
  text-align: center;

  .btn-next,
  .btn-prev,
  .el-pager li {
    background-color: #fff !important;
    color: #666 !important;
    border: 1px solid #ebebeb;
  }

  .btn-next,
  .btn-prev {
    width: 5rem;
  }

  .el-pager li:not(.disabled).active {
    color: #fff !important;
    background-color: #2a65ff !important;
  }

  .btn-next.disabled,
  .btn-next:disabled,
  .btn-prev.disabled,
  .btn-prev:disabled,
  .el-pager li.disabled {
    background-color: transparent !important;
  }

  .el-pager li.active + li {
    border-left: auto;
  }
}
</style>
